<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElMessage } from 'element-plus'
import { Application } from '@/api/application/types'
import { createAppApi } from '@/api/application'

const { t } = useI18n()

const createForm = reactive({
  appName: '',
  appSecret: '',
  applyWay: 'free',
  state: 'developing',
  contactWay: '',
  profile: ''
})

const rules = reactive({
  appName: [
    { required: true, message: '应用名称为必填项', trigger: 'blur' },
    { min: 3, max: 20, message: '应用名称的长度应介于3到20', trigger: 'blur' }
  ],
  appSecret: [
    { required: true, message: '应用密码为必填项', trigger: 'blur' },
    { min: 6, max: 20, message: '应用密码的长度应介于6到20', trigger: 'blur' }
  ]
})
const createRef = ref()
const createLoading = ref(false)
const handleCreate = async () => {
  await createRef.value?.validate(async (isValid: boolean) => {
    if (isValid) {
      createLoading.value = true
      const res = await createAppApi(createForm as Application)
        .catch(() => {})
        .finally(() => {
          createLoading.value = false
        })
      if (res) {
        ElMessage.warning(res.msg)
      }
    }
  })
}
const handleReset = () => {
  createRef.value?.resetFields()
}
</script>

<template>
  <ElForm ref="createRef" :model="createForm" :rules="rules">
    <ElFormItem :label="t('application.appName')" prop="appName">
      <ElInput v-model="createForm.appName" />
    </ElFormItem>
    <ElFormItem :label="t('application.appSecret')" prop="appSecret">
      <ElInput v-model="createForm.appSecret" type="password" :showPassword="true" />
    </ElFormItem>
    <ElFormItem :label="t('application.contactWay')">
      <ElInput v-model="createForm.contactWay" />
    </ElFormItem>
    <ElFormItem :label="t('application.profile')">
      <ElInput
        v-model="createForm.profile"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 5 }"
      />
    </ElFormItem>
    <ElRow :gutter="5">
      <ElCol :span="12">
        <ElFormItem :label="t('application.applyWay')">
          <ElSelect v-model="createForm.applyWay">
            <ElOption value="free" :label="t('application.free')" />
            <ElOption value="self" :label="t('application.self')" />
            <ElOption value="invite" :label="t('application.invite')" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="12">
        <ElFormItem :label="t('application.state')">
          <ElSelect v-model="createForm.state">
            <ElOption value="developing" :label="t('application.developing')" />
            <ElOption value="online" :label="t('application.online')" />
            <ElOption value="offline" :label="t('application.offline')" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElFormItem>
      <ElButton type="primary" @click="handleCreate" :loading="createLoading">
        {{ t('common.submit') }}
      </ElButton>
      <ElButton type="warning" @click="handleReset" :loading="createLoading">
        {{ t('common.reset') }}
      </ElButton>
    </ElFormItem>
  </ElForm>
</template>
